<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :model="page">
        <el-form-item label="策略搜索：">
          <el-input v-model="page.policyName" class="elinput1" clearable placeholder="请输入" />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button class="btn1" size="small" icon="el-icon-circle-plus-outline" @click="addDialog = true">新建</el-button>
      <el-table
        :data="queryList"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="policyName"
          label="策略名称"
        />
        <el-table-column
          prop="discount"
          label="策略方案"
        />
        <el-table-column
          prop="updateTime"
          label="创建日期"
          width="200"
        />
        <el-table-column
          label="操作"
          width="200"
        >
          <template #default="{row}">
            <el-link type="primary" @click="viewList(row)">查看详情</el-link>
            <el-link type="primary" @click="editList(row)">修改</el-link>
            <el-link type="danger" @click="deleList(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加 -->

    <el-dialog
      title="提示"
      :visible.sync="addDialog"
      width="40%"
    >
      <el-form ref="ruleForm" :model="addForm" :rules="addRules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="策略名称：" prop="policyName">
          <el-input v-model="addForm.policyName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="策略方案：" prop="discount">
          <template>
            <el-input-number v-model="addForm.discount" placeholder="请输入" controls-position="right" :min="1" />
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->

    <el-dialog
      title="提示"
      :visible.sync="editDialog"
      width="40%"
    >
      <el-form ref="ruleForm" :model="editForm" :rules="editRules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="策略名称：" prop="policyName">
          <el-input v-model="editForm.policyName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="策略方案：" prop="discount">
          <template>
            <el-input-number v-model="editForm.discount" placeholder="请输入" controls-position="right" :min="1" />
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="determineTheModifications">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情 -->
    <div class="inform">
      <el-dialog
        title="策略详情"
        :visible.sync="viewdialog"
        width="30%"
      >
        <el-form ref="form" label-width="120px">
          <el-form-item label="策略名称：">
            {{ policyName }}
          </el-form-item>
          <el-form-item label="策略方案：">
            <el-table
              :data="seeDetails"
              style="width: 100%"
            >
              <el-table-column label="序号" type="index" />
              <el-table-column
                prop="nodeName"
                label="点位名称"
              />
              <el-table-column
                prop="innerCode"
                label="设备编号"
              />
            </el-table>
          </el-form-item>
          <el-pagination
            :current-page="viewFrom.pageIndex"
            :page-size="viewFrom.pageSize"
            layout="total, prev, pager, next"
            :total="totalCounts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="viewdialog = false">取 消</el-button>
          <el-button type="primary" @click="viewdialog = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { policyManagementAPI, tacticsaddAPI, tacticsviewAPI, tacticsEditAPI, tacticsDeleAPI } from '@/api/other.js'
export default {
  data() {
    return {
      page: {
        policyName: '',
        pageIndex: 1,
        pageSize: 10
      },
      queryList: [],
      // 添加
      addDialog: false,
      addForm: {
        discount: undefined,
        policyName: ''
      },
      addRules: {
        policyName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      // 查看详情
      policyName: '',
      viewdialog: false,
      seeDetails: [],
      viewFrom: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCounts: null,
      isrowID: null,
      // 修改
      editDialog: false,
      editForm: {
        discount: undefined,
        policyName: ''
      },
      editRules: {
        policyName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      editID: null
    }
  },
  created() {
    this.getpolicyManagementAPI()
  },
  methods: {
    // 查询
    inquire() {
      this.getpolicyManagementAPI()
    },
    // 主体
    async getpolicyManagementAPI() {
      const res = await policyManagementAPI(this.page)
      this.queryList = res.currentPageRecords
      this.queryList.forEach(item => {
        item.updateTime = item.updateTime.replace(/T/g, ' ')
      })
    },
    // 添加
    async addList() {
      await tacticsaddAPI(this.addForm).catch(err => this.$message.error(err.response.data))
      this.$message.success('添加成功！')
      this.getpolicyManagementAPI()
      this.addDialog = false
    },
    // 查看详情
    viewList(row) {
      this.viewdialog = true
      this.isrowID = row.policyId
      this.policyName = row.policyName
      this.getView(this.isrowID, this.viewFrom)
    },
    async getView(isrowID, policyName) {
      const res = await tacticsviewAPI(isrowID, policyName)
      this.totalCounts = res.totalCount - 0
      this.seeDetails = res.currentPageRecords
      console.log(res)
    },
    // 查看详情分页
    handleSizeChange(newSize) {
      this.viewFrom.pageSize = newSize
      this.getView(this.isrowID, this.viewFrom)
    },
    handleCurrentChange(newNum) {
      this.viewFrom.pageIndex = newNum
      setTimeout(() => {
        this.getView(this.isrowID, this.viewFrom)
      }, 0)
      console.log(newNum)
    },
    // 修改
    editList(row) {
      this.editDialog = true
      this.editForm.policyName = row.policyName
      this.editForm.discount = row.discount
      this.editID = row.policyId
    },
    // 确定修改
    async  determineTheModifications() {
      await tacticsEditAPI(this.editID, this.editForm).catch(err => this.$message.error(err.response.data))
      this.$message.success('修改成功！')
      this.getpolicyManagementAPI()
      this.editDialog = false
    },
    // 删除
    async  deleList(row) {
      const prve = await this.$confirm('确定删除该策略???', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') return this.$message.info('已取消')
      await tacticsDeleAPI(row.policyId).catch(err => this.$message.error(err.response.data))
      this.$message.success('删除成功！')
      this.getpolicyManagementAPI()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.btn1{
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
    color: #fff;

}
.el-link {
  margin-right: 15px;
}
.el-input-number{
  width: 100%;
}
::v-deep .el-table__row{
  line-height: 0px !important;
  width: 40px !important;
}
.inform{
  margin-top: 0 !important;
 .el-dialog__wrapper{
  top: -100px !important;
 }
}
</style>
